Seed design system for OpenClaw Windows Hub - #962
Conversation
Add .agents/design/ (design.json, components.jsx, principles.md) with tokens derived from the WinUI 3/XAML surfaces. The app themes off Windows Fluent system resources, so color/type/radius tokens map to Fluent (SystemAccentColor, Segoe UI Variable, Cascadia Mono) rather than a bespoke palette. No application code changed. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Refine control padding to WinUI defaults (Button 11,5,11,6 with 100px min-width; Field TextControlThemePadding 10,5,6,6, min-height 32; Card Gallery padding 16,12) and add reusable chat components grounded in the native timeline and composer: ChatBubble, ChatComposer, ChatThread. Add a 'bubble' (16px) radius token mirroring OpenClawChatTimeline CornerRadius and point ChatBubble at var(--radius-bubble). Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Distinguish user vs assistant bubbles and enrich the assistant footer to match the native timeline (OpenClawChatTimeline): - Add a 36x36 circular assistant avatar (subtle fill + 1px line border, top-aligned, 8px gap) left of the agent bubble; user bubbles show none, mirroring showUserAvatar=false. Sparkle glyph stands in for the app logo. - Give every bubble a muted timestamp footer; assistant footer also shows the context-usage readout (ChatUsageFormatter's used/context (pct%)) with a subtle inline Copy affordance right of the usage text. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Mirror the GitHub Copilot composer layout: left cluster = Add, model picker, reasoning-effort picker; right cluster = mic + Send. Only Send carries the accent; every other control is subtle chrome. Give the icon buttons and inline pickers WinUI SubtleButtonStyle interaction states — SubtleFillColorSecondary on hover, the lighter SubtleFillColorTertiary on press, glyph/label darkening to primary text, 120ms ease-out. Add subtleHover / subtlePressed tokens (Fluent subtle fills) so no hex is hard-coded in the component. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
|
Codex review: needs real behavior proof before merge. Reviewed August 4, 2026, 5:07 PM ET / 21:07 UTC. ClawSweeper reviewWhat this changesThis PR adds 474 lines of non-shipping design tokens, static component examples, and design guidance under Merge readiness⛔ Blocked until stronger real behavior proof is added - 14 items remain Keep open. Current main does not contain this catalog, but the proposed agent-facing authority conflicts with the current Reactor-owned chat contract and lacks current-head validation and proof. Priority: P2 Review scores
Verification
How this fits togetherWindows Hub is a native WinUI tray application whose chat surface is now rendered by Reactor components using Fluent theme resources. The new catalog would guide designers and coding agents before they port a design into those shipping surfaces. flowchart LR
A[Native chat and WinUI code] --> B[Fluent resources and behavior]
B --> C[Design catalog]
C --> D[Agent and designer guidance]
D --> E[Reactor and WinUI implementation]
E --> F[Windows Hub users]
Decision needed
Why: The PR adds a new contributor and agent authority surface rather than repairing existing runtime behavior; the repository must choose whether to support and maintain that surface. Before merge
Findings
Agent review detailsSecurityNone. Review metrics
Merge-risk optionsMaintainer options:
Technical reviewBest possible solution: If maintainers sponsor a repository-owned catalog, make native Reactor and WinUI behavior canonical, label every catalog example as derived and partial, update the retired JSX reference, add a repository-owned smoke check, and post redacted current-head Light, Dark, and High Contrast proof. Do we have a high-confidence way to reproduce the issue? Not applicable. This is a non-shipping design-catalog proposal, so the relevant evidence is current-source contract and current-head catalog proof rather than a bug reproduction. Is this the best way to solve the issue? No. The proposed catalog must become a derived, explicitly partial reference to the current native contract, rather than an independent authority for design decisions. Full review comments:
Overall correctness: patch is incorrect AGENTS.md: found and applied where relevant. Codex review notes: model internal, reasoning high; reviewed against 6e225e4758e1. LabelsLabel justifications:
EvidenceWhat I checked:
Likely related people:
Rating scale
Overall follows the weaker of proof and patch quality. Workflow
HistoryReview history (27 earlier review cycles; latest 8 shown)
|
Rename the design system's brand from the product name (OpenClaw Windows Hub) to Windows Fluent UI for OpenClaw, reflecting its basis in Windows Fluent design conventions. Clarify that it is the design system for the OpenClaw Windows Hub app in design.json and principles.md. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
The CSS/JSX scanner finds no files in this XAML repo; every token was derived by manual inspection of the WinUI 3 XAML and C# surfaces. Update meta.updatedBy and meta.note to reflect that accurately. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
|
🤖 Copilot assistant note, posted on Scott's behalf — this is not Scott writing personally. I was initially confused about the intended authority boundary here. I inferred that the JSX was a non-shipping visual reference derived from the native WinUI app, but the current wording sends mixed signals:
Because this is a native WinUI application, I suggest making the boundary explicit for future agents and contributors:
It would also help to qualify or remove “source of truth,” and name who is responsible for synchronizing these derived examples after native UI changes. That clarity would have prevented my initial misreading and should keep future bots from treating the JSX as a parallel product authority. |
Design files are the source of truth for design (framework-agnostic); components.jsx is design intent for the canvas preview, not shipping code. Record how the design ships via authority.port targets: - default: Native WinUI 3 / C# (Windows Fluent), ported via win-dev-skills - chat surface (ChatBubble, ChatComposer, ChatThread): Reactor (microsoft-ui-reactor); no dedicated porting agent yet (WIP) Updates meta.note, components.jsx header, and principles.md to match. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
|
Pushed an update that reworks the authority framing in response to @scott's note about The seed now uses Colophon's new port-target model instead of a flat source-of-truth claim:
So the boundary Scott asked for is now explicit: native XAML/C# (and Reactor for chat) is what ships; the JSX/design files are the upstream design intent that gets ported into it, and the |
This should remain draft. The design-system idea is useful, but the current artifacts are not yet safe as authoritative guidance for a native WinUI app. The main issues from the paired review:
Recommended framing: keep native XAML/C# behavior canonical; use this catalog to explain visual intent and reusable patterns, with semantic resource mappings and explicit coverage limits. That would preserve the value of the design artifacts without teaching future agents to hard-code colors or omit native functionality. |
The seed adopted the port-target authority model, but the latest colophon validator now requires more once a port is set. Add the missing pieces so design.json passes cleanly (0 errors / 0 warnings): - authority.owner + authority.syncProcess (required when a port exists) - per-color `resource` (WinUI Fluent ThemeResource brush keys) so agents bind system brushes instead of the preview-only hex - per-color `themes` (dark + highContrast) for dark/high-contrast previews, matching the brand's stated "never hard-code hex that breaks in dark or high-contrast" principle Keeps the existing port authoritySource (Native WinUI 3 / Windows Fluent), win-dev-skills syncSource/helperAgent, and the chat -> Reactor portOverride. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Colophon replaced the pseudocode-React components.jsx format with a structured, framework-agnostic components.jsonc element tree (rendered by a pure JSON->DOM interpreter, no React/Babel). Port the seed's components over faithfully: - Button, Field, Card, Badge, ChatBubble, ChatComposer, ChatThread, ExampleScreen translated to the element-tree schema at their rest state, keeping the ds-* classes, CSS-variable styling, WinUI-derived metrics, and SVG glyphs (send/mic/add/copy/chevron/ sparkle) intact. ComposerPicker factored out as a reusable component. - Interactive hover/press JS (not expressible in the static scene graph) is dropped; the preview shows the documented rest state. Validates clean (0 errors / 0 warnings); all prototypes.jsonc component references resolve. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Seeds a design system under
.agents/design/for the OpenClaw Windows Hub (WinUI 3 tray app), named Windows Fluent UI for OpenClaw. No application code is changed — this only adds files under.agents/design/.Built with Colophon
Authored and previewed with the Colophon Copilot plugin — an experimental design-system canvas that treats
.agents/design/as the source of truth and rendersdesign.json+components.jsxlive (and feeds them back to Copilot when it builds UI). The tokens here were seeded from the app's own WinUI/Fluent surfaces and refined in the canvas.What's included
Chat components
OpenClawChatTimelinemetrics.Tokens of note
bubble(16px) matching the native chat bubble corner radius.subtleHover/subtlePressedfor subtle/transparent controls (Fluent SubtleFillColorSecondary/Tertiary).Validation
new Functionpipeline.Stacked work
A follow-up branch applies the
ChatComposerpattern to the real app chat UI (stacked on this branch): karkarl#1.Co-authored-by: Copilot App 223556219+Copilot@users.noreply.github.com